<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" v-if="multiple" width="55" />
    <el-table-column type="index" width="50" label="序号" />
    <template v-for="(itemObj, index) in columns" :key="index">
      <!-- 3.1 type为空，表示常规列 -->
      <el-table-column
        v-if="!itemObj.type"
        :prop="itemObj.field"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
      </el-table-column>

      <!-- 3.2 下拉选项列-采用tag标签 -->
      <el-table-column
        v-else-if="itemObj.type === 'select'"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
        <template #default="scope">
          <!-- 多级嵌套字段不行 -->
          <!-- <el-tag type="success">{{ scope.row[itemObj.field] }}</el-tag> -->
          <el-tag type="success">{{ getFieldValue(scope.row, itemObj.field) }}</el-tag>
        </template>
      </el-table-column>

      <!-- 3.3 头像列-采用img标签 -->
      <el-table-column
        v-else-if="itemObj.type === 'avatar'"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
        <template #default="scope">
          <img
            :src="scope.row[itemObj.field] ? scope.row[itemObj.field] : defaultImg"
            style="width: 30px; height: 30px"
            :onerror="defaultImg"
          />
        </template>
      </el-table-column>

      <!-- 3.4 icon图标列-动态显示icon组件 -->
      <el-table-column
        v-else-if="itemObj.type === 'icon'"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
        <template #default="scope">
          <el-icon :size="16" v-if="scope.row[itemObj.field]">
            <component :is="scope.row[itemObj.field]" />
          </el-icon>
        </template>
      </el-table-column>

      <!-- 3.5 switch开关列-值为false和true--采用el-switch组件 -->
      <el-table-column
        v-else-if="itemObj.type === 'switch'"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
        <template #default="scope">
          <el-switch v-model="scope.row[itemObj.field]" disabled />
        </template>
      </el-table-column>

      <!-- 3.6 switch2开关列-值为数字0和1--采用el-switch组件 -->
      <el-table-column
        v-else-if="itemObj.type === 'switch2'"
        :label="itemObj.title"
        :min-width="itemObj.width && 100"
      >
        <template #default="scope">
          <el-switch
            :active-value="1"
            disabled
            :inactive-value="0"
            v-model="scope.row[itemObj.field]"
          />
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
import { reactive, toRefs, inject } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
    })
    const columns = inject('columns')
    const tableData = inject('tableData')
    // 多选按钮，如果没有provide，则取默认值
    const multiple = inject('multiple', false)

    return {
      tableData,
      multiple,
      columns,
      ...toRefs(state),
    }
  },
}
</script>

<style lang="scss" scoped></style>
